<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作业</title>
  <style>
    table{
      text-align: center;
    }
  </style>
</head>
<body>
  <button id="btn" style="margin-bottom: 16px;">添加一条新的访客信息</button>
  <button id="btnDe" style="margin-bottom: 16px;">删除选中</button>
  <button id="btnAge" style="margin-bottom: 16px;">年龄从小到大</button>
  <button id="allSel" style="margin-bottom: 16px;">全选</button>
  <button id="allNotSel" style="margin-bottom: 16px;">全不选</button>
  <button id="backSel" style="margin-bottom: 16px;">反选</button>
  <table  border="1" cellspacing ="0" cellpadding = "10">
    <tbody>
      <tr>
        <th>序列号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
        <th>选择</th>
      </tr>  
    </tbody>
  </table>
  

  <script>
    var info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];


        let btn = document.querySelector("#btn");

        let tbody = document.querySelector("tbody");
        let deleBtn = document.querySelectorAll("#deleBtn")
        let btnDe = document.querySelector("btnDe");
        let btnAge = document.querySelector("btnAge");

        let i = 0;
        let arrAge =[];

        //
        btn.onclick = function() {
          if(i < info.length ){
          let newTr = document.createElement("tr");

          newTr.innerHTML = 
          `
            <td>${i+1}</td>
            <td>${info[i]["name"]}</td>
            <td>${info[i]["age"]}</td>
            <td><button id = "deleBtn">删除</button></td>
            <td><input type="checkbox"></td>
          `

          tbody.appendChild(newTr)

          deleBtn = tbody.querySelectorAll("#deleBtn");

          deleBtn.forEach(function(current,index){
            current.onclick = function() {
              current.parentElement.parentElement.remove();
            }   
          })
        }
        i++;
      }
 
        
        //选中删除
          slBtn = tbody.querySelectorAll("input");
          window.btnDe.onclick = function(){
            slBtn = tbody.querySelectorAll("input");
            slBtn.forEach(function(current) {
              if(current.checked == true) {
              current.parentElement.parentElement.remove();
            }
            })
          }

        //年龄排序
          window.btnAge.onclick = function(){
            let dataArr = [];
            let trDate = tbody.querySelectorAll("tr:not(:first-child)");

            trDate.forEach(function(current) {

              dataArr.push(current);
              dataArr.sort(function(a,b) {

                return a.children[2].innerHTML - b.children[2].innerHTML
              })
            })
            console.log(dataArr);


           //将页面重新渲染
          dataArr.forEach(function(current){
            tbody.appendChild(current);
          })
          }

        //全选
        let allSel = document.querySelector("#allSel")
        allSel.onclick = function(){
        let checkboxs = tbody.querySelectorAll("input[type='checkbox']");
            checkboxs.forEach(function(item) {
                item.checked=true;
            })
        };

        //全不选
        let allNotSel = document.querySelector("#allNotSel")
        allNotSel.onclick = function(){
        let checkboxs = tbody.querySelectorAll("input[type='checkbox']");
            checkboxs.forEach(function(item) {
                if(item.checked == true) {
                    item.checked=false;
                }
            })
        };

        //反选
        let backSel  = document.querySelector("#backSel")
        backSel.onclick = function(){
        let checkboxs = tbody.querySelectorAll("input[type='checkbox']");
            checkboxs.forEach(function(item) {
                // item.checked = !item.checked;//
                if(item.checked) {
                    item.checked = false;
                } else {
                    item.checked = true;
                }
            })
        };


  </script>
</body>
</html>